<template>
    <el-dialog v-model="dialogVisible" :before-close="handleClose" title="新建场景" width="30%">
        <el-form ref="createSceneFormRef" :model="createSceneForm" :rules="rules" label-width="120px">
            <el-form-item label="场景ID" prop="sceneId">
                <el-input v-model="createSceneForm.sceneId" />
            </el-form-item>
            <el-form-item label="场景名称" prop="sceneName">
                <el-input v-model="createSceneForm.sceneName" />
            </el-form-item>
            <el-form-item>
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button type="primary" @click="confirmFn(createSceneFormRef)">确认</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
</template>

<script>
import { ref, reactive , toRaw} from 'vue'
import { createSceneApi } from "@/api/carManage/policyManage.js";
import { ElMessage } from "element-plus";

export default {
    emits: ['feedback'],
    setup(props, {
        attrs,
        slots,
        emit
    }) {
        const dialogVisible = ref(false);
        const creator = ref('');
        const createSceneFormRef = ref();
        const createSceneForm = reactive({
            sceneId: '',
            sceneName: ''
        })
        const rules = reactive({
            sceneId: [
                { required: true, message: '请输入场景ID', trigger: 'blur' },
                { pattern: /^-?\d+\.?\d*$/, message: '请输入数字', trigger: 'blur' }
            ],
            sceneName: [
                { required: true, message: '请输入场景名称', trigger: 'blur' }
            ],
        })

        const switchVisible = () => {
            dialogVisible.value = true;
            createSceneForm.sceneName = '';
            createSceneForm.sceneId = '';
            try {
                creator.value = JSON.parse(localStorage.getItem('userInfo')).employeeId;
            } catch (e) {

            }
        }
        const handleClose = () => {
            dialogVisible.value = false;
        }
        const confirmFn = async (formEl) => {
            let req = toRaw(createSceneForm)
            if (!formEl) return
            await formEl.validate((valid, fields) => {
                if (valid) {
                    createSceneApi({
                        name: req.sceneName,
                        id: req.sceneId,
                        createBy: creator.value
                    }).then(res => {
                        if (res.data.data == 1) {
                            ElMessage({
                                message: '新增成功',
                                type: 'success',
                            })
                            emit('feedback')
                        } else {
                            ElMessage({
                                message: '新增失败',
                                type: 'error',
                            })
                        }
                        dialogVisible.value = false;
                    })
                }
            })

        }

        return {
            dialogVisible,
            switchVisible,
            // sceneName,
            // sceneId,
            creator,
            confirmFn,
            rules,
            createSceneForm,
            createSceneFormRef,
            handleClose
        }
    }
}

</script>